/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image
} from 'react-native';

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
//引入计时器
var TimerMixin = require('react-timer-mixin');
//引入json数据
var jasonData = require('./ImageData.json');
var scrollViewwuxian = React.createClass({
    //注册计时器
    mixins: [TimerMixin],
    getInitialState(){
        return{
            currentPage:0
        }
    },
    getDefaultProps(){
        return{
            duration:2000
        }
    },
    render(){
        return (
            <View style={styles.container}>
                <ScrollView
                    ref="scrollView"
                    horizontal={true}
                    // 自动分页
                    pagingEnabled={true}
                    // 隐藏滚动条
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                    // 当一帧滚动结束调用方法
                    onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
                    //开始拖拽
                    onScrollBeginDrag={this.onScrollBeginDrag}
                    //停止拖拽
                    onScrollEndDrag={this.onScrollEndDrag}
                >
                    {this.renderAllImage()}
                </ScrollView>
                <View style={styles.indicatorStyle}>
                    {this.renderAllIndicator()}
                </View>
            </View>
        );
    },
    componentDidMount(){
        this.startTimer();
    },
    onScrollBeginDrag(){
        this.clearInterval(this.timer);
    },
    onScrollEndDrag(){
        this.startTimer();
    },
    startTimer(){
        // 1. 拿到scrollView
        var scrollView = this.refs.scrollView;
        var imgCount = jasonData.data.length;
        // 2.添加定时器  this.timer --->可以理解成一个隐式的全局变量
        this.timer = this.setInterval(function (){
            // 2.1 设置圆点
            var activePage = 0;
            // 2.2 判断
            if ((this.state.currentPage+1) >= imgCount) {//越界
                activePage = 0;
            } else {
                activePage = this.state.currentPage+1;
            }
            // 2.3 更新状态机
            this.setState({
                currentPage:activePage
            })
            // 2.4 让scrollView滚动起来
            // 2.5计算scrollView的偏移量
            var offsetX = activePage*width;
            scrollView.scrollResponderScrollTo({x:offsetX,y:0, animated:true});
        },this.props.duration);
    },
    renderAllImage(){
        //    定义一个图片数组
        var allImage = [];
        //    拿到图像数组
        var imgArr = jasonData.data;
        for (var i = 0; i<imgArr.length; i++) {
            //    取出单独的对象
            var imageItem = imgArr[i];
            //    创建组件装入数组
            allImage.push(
                <Image key={i} source={{uri:imageItem.img}} style={styles.imagesStyle}/>
            );
        }
        return allImage;
    },
    renderAllIndicator(){
        var allIndicator = [];
        var style;
        //    拿到图像数组
        var imgArr = jasonData.data;
        for (var i=0;i<imgArr.length;i++) {
            style = (i==this.state.currentPage) ? {color:'orange',fontSize:35}:{color:'white',fontSize:30};
            allIndicator.push(
                <Text key={i} style={[{fontSize:30},style]}>&bull;</Text>
            )
        }
        return allIndicator;
    },
    onAnimationEnd(e){
        // 1.求出水平方向的偏移量
        var offsetX = e.nativeEvent.contentOffset.x;
        // 2.求出当前的页数
        var currentPage = Math.floor(offsetX/width);
        // 3.更新状态机,重新绘制UI
        this.setState({
            // 当前的页码
            currentPage:currentPage
        })
    }

});

const styles = StyleSheet.create({
    container: {
        marginTop:20,
    },
    imagesStyle:{
        width: width,
        height: 120,
    },
    indicatorStyle:{
        backgroundColor:'rgba(0,0,0,0.4)',
        width:width,
        height:25,
        position:'absolute',
        bottom:0,
        flexDirection:'row',
        alignItems:'center'
    }
});


AppRegistry.registerComponent('scrollViewwuxian', () => scrollViewwuxian);
